<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>订单管理</el-breadcrumb-item>
                    <el-breadcrumb-item>上分订单</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <template #header>
                    <div style="display: flex; align-items: center;">
                        <el-input style="width: 260px;" v-model="inputval" placeholder="请输入UID、手机、昵称、备注" />
                      <div style="padding: 5px;"></div>
                      <el-select   style="width: 150px;" v-model="page.status" placeholder="全部">
                        <el-option label="全部" value="0">全部</el-option>
                        <el-option label="待处理" value="1">待处理</el-option>
                        <el-option label="上分成功" value="2">上分成功</el-option>
                        <el-option label="上分失败" value="3">上分失败</el-option>
                      </el-select>
                      <div style="padding: 5px;"></div>
                      <el-date-picker v-model="page.time_date[0]" :default-value="page.time_date[0]" type="datetime" placeholder="开始日期" style="width: 180px;" />
                      <div style="width: 15px"></div>
                      <el-date-picker v-model="page.time_date[1]" :default-value="page.time_date[1]" default-time="12:00:00" type="datetime" placeholder="结束日期" style="width: 180px;" />
                      <div style="padding: 5px;"></div>
                        <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>
                    </div>
                </template>

                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="100" />
                    <!-- <el-table-column prop="orderid" label="订单ID" /> -->
					
                    <el-table-column label="用户详情" width="180">
                        <template #default="scope">
                            <div>UID：{{scope.row.uid}}</div>
                            <div>昵称：{{scope.row.nickname}}</div>
                            <div>手机：{{scope.row.user?.phone}}</div>
                            <div>备注：{{scope.row.user?.remark}}</div>
                    		<div>类型：
                    			<el-tag type="success" v-if="scope.row.role == 0">正常玩家</el-tag>
                    			<el-tag type="danger" v-if="scope.row.role == 1">内部用户</el-tag>
                    		</div>
                        </template>
                    </el-table-column>>

                    <el-table-column label="充值金额">
                        <template #default="scope">
                            <el-tag type="danger">￥{{ scope.row.money }}</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="余额前后">
                        <template #default="scope">
                            <div>操作前:<el-tag type="danger"> ￥{{scope.row.money_log ? scope.row.money_log.money:scope.row.user.money}}</el-tag></div>
                          <div>操作后:<el-tag type="success" v-if="scope.row.money_log">￥{{ scope.row.money_log.moneys}}</el-tag></div>
                        </template>
                    </el-table-column>

                    <el-table-column label="订单状态">
                        <template #default="scope">
                            <el-tag type="danger" v-if="scope.row.status == 1">等待处理</el-tag>
                            <el-tag type="success" v-if="scope.row.status == 2">上分成功</el-tag>
                            <el-tag type="warning" v-if="scope.row.status == 3">上分失败</el-tag>
                        </template>
                    </el-table-column>
                  <el-table-column prop="reason"  label="拒绝理由" />

                    <el-table-column prop="create_time" label="订单时间" />
                    <el-table-column label="订单操作" width="260">

                        <template #default="scope">
                            <el-popconfirm title="确定通过吗？" @confirm="admin_walletsave_status(scope.row.id, 'success')" v-if="role.includes('tongyi')">
                                <template #reference>
                                    <el-button :disabled="scope.row.status != 1" type="success">通过</el-button>
                                </template>
                            </el-popconfirm>
                          <el-button type="danger" :disabled="scope.row.status != 1" @click="admin_walletsave_status_dialog(scope.row, 'error')" v-if="role.includes('jujue')">拒绝</el-button>

                          <el-popconfirm  title="确定回滚吗？" @confirm="admin_walletsave_status(scope.row.id, 'rollback')" v-if="isOneDayAgo(scope.row.create_time) && role.includes('huigui')">
                            <template #reference>
                              <el-button :disabled="scope.row.status == 1" type="success" >回滚</el-button>
                            </template>
                          </el-popconfirm >
                        </template>
                    </el-table-column>

                </el-table>
                <!-- 分页 -->

                <div style="padding: 10px;"></div>
                <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                    :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                    :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </el-card>
        </el-col>
    </el-row>

  <el-dialog v-model="jjDialog" title="填写拒绝理由" center width="38%" :destroy-on-close="true">
    <el-form label-width="100px">

      <el-form-item label="拒绝理由">
        <el-input  type="textarea" v-model="reasonDate.reason"/>
      </el-form-item>

    </el-form>

    <template #footer>
      <el-button type="primary" @click="admin_walletsave_status(reasonDate.id,reasonDate.type)" :disabled="isTj">确定</el-button>
    </template>
  </el-dialog>


</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, UserFilled, Search } from '@element-plus/icons-vue'


const tableData = reactive({ list: [] })

const role = ref([]);
onMounted(() => {
    admin_walletsave_order()
    const list = JSON.parse(window.localStorage.getItem('menus_data'))
    let menu = [];
    for(let key in list){
      if(list[key].name=='订单管理'){
        menu = list[key]
      }
    }
    console.log(menu,'menu');
    let child = [];
    for(let i in menu.children){
      if(menu.children[i].name=='上分订单'){
        child = menu.children[i]
      }
    }
    let roleArr =[];

    for(let i in child.children){
      roleArr.push(child.children[i].role)
    }
    role.value = roleArr
})

function isOneDayAgo(targetTime) {
  if (!targetTime) return false;

  const now = new Date();
  const target = new Date(targetTime);

  // 计算两个时间的毫秒差
  const timeDiff = now - target;

  // 一天的毫秒数
  const oneDayInMs = 24 * 60 * 60 * 1000-5*60*1000;

  // 判断时间差是否大于等于一天
  return timeDiff <= oneDayInMs;
}
// 判断当前时间是否在 23:55 之后
function isAfter2355() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  return hours > 23 || (hours === 23 && minutes >= 55);
}

// 搜索 
const inputval = ref('')
function inputSearch() {
    // if (inputval.value == '') {
    //     return error('请输入代理UID')
    // }
    page.uid = inputval.value
    admin_walletsave_order()
}

// 获取用户列表
function admin_walletsave_order() {

    request_post('/admin_walletsave_order', page).then((res) => {
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            page.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })

}
const isTj = ref(false);
function admin_walletsave_status(id, type) {
  if(isTj.value==true){
    return false
  }
  isTj.value = true;
    request_post('/admin_walletsave_status', { id, type,reason:reasonDate.reason }).then((res) => {
        if (res.data.code == 200) {
            admin_walletsave_order()
            isTj.value  = false
            jjDialog.value = false;
            return success(res.data.msg)
        } else {
          admin_walletsave_order()
            isTj.value  = false
            jjDialog.value = false;
            return error(res.data.msg)
        }

    })
}

const jjDialog = ref(false);
const reasonDate = reactive({
  id:0,
  type:'error',
  reason:'',
})
function admin_walletsave_status_dialog(item, type) {
  reasonDate.id = item.id;
  reasonDate.type = type;
  jjDialog.value = true;
}


var now_date = new Date();
var now_date2 = new Date();
var year = now_date.getFullYear();
var month = now_date.getMonth() + 1; // 月份从0开始，所以要加1
var day = now_date.getDate();
now_date.setHours(23, 59, 59);
now_date2.setHours(0,0,0)
const page = reactive({
  status:"0",
    uid: '',
  time_date:[
    now_date2,now_date
  ],
    pagenum: 1,
    pagesize: 18,
    total: 0
})

function handleSizeChange(val) {
    page.pagenum = val
    admin_walletsave_order()
}
function handleCurrentChange(val) {
    page.pagenum = val
    admin_walletsave_order()
}


</script>

<style></style>
